<!DOCTYPE html>
<meta charset="UTF-8">
<h2>基本菜单</h2>
<div class="demo-info">
	<div>右键显示菜单.</div>
</div>
<div style="margin: 10px 0;"></div>
<div id="menu_basic" data-type="menu" style="width: 120px;" data-defs="onClick:menuHandler">
	<div onclick="javascript:alert('new')">菜单1</div>
	<div>
		<span>菜单2</span>
		<div style="width: 150px;">
			<div>
				<b>菜单21</b>
			</div>
			<div>菜单22</div>
			<div>菜单23</div>
			<div>
				<span>24</span>
				<div style="width: 120px;">
					<div>241</div>
					<div>242</div>
					<div>
						<span>243</span>
						<div style="width: 80px;">
							<div>2431</div>
							<div>2432</div>
							<div onclick="javascript:alert('sub21')">2433</div>
						</div>
					</div>
					<div>244</div>
				</div>
			</div>
			<div>
				<span>25</span>
				<div style="width: 120px;">
					<div data-defs="href:'window.html'">251</div>
					<div data-defs="href:'dialog.html'">252</div>
					<div>
						<a href="http://www.jjwwui.com" target="_blank">AgileUI</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div data-defs="iconCls:'icon-save'">菜单3</div>
	<div data-defs="iconCls:'icon-print',disabled:true">菜单4</div>
	<div class="menu-sep"></div>
	<div>菜单5</div>
</div>
<script>
	$(function() {
	    $(document).bind('contextmenu', function(e) {
		    e.preventDefault();
		    $('#menu_basic').menu('show', {
		        left : e.pageX,
		        top : e.pageY
		    });
	    });
    });
    function menuHandler(item) {
	    alert(item);
    }
</script>
